<template>
  <div id="data-view">
    <dv-full-screen-container>

      <top-header></top-header>
      <div class="main-content">
        <digital-flop v-bind:digitalFlop="digitalFlop"/>

        <div class="block-left-right-content">
          <ranking-board v-bind:rankdata="rankdata"/>

          <div class="block-top-bottom-content">
            <div class="block-top-content">
              <rose-chart/>
              <water-level-chart/>
              <scroll-board v-bind:scroll-data="scrollData"/>
              <cards/>
              <TopLeftCmp v-bind:count_-o-p="count_OP"></TopLeftCmp>
              <TopMiddleCmp></TopMiddleCmp>
              <bottom-right-cmp></bottom-right-cmp>
            </div>
          </div>
        </div>
      </div>
    </dv-full-screen-container>
  </div>
</template>


<script>
import topHeader from './topHeader'
import digitalFlop from './digitalFlop'
import rankingBoard from './rankingBoard'
import roseChart from './roseChart'
import waterLevelChart from './waterLevelChart'
import scrollBoard from './scrollBoard'
import cards from './cards'
import bottomRightCmp from "@/components/hardware/dataV/bottomRightCmp";
import TopLeftCmp from "@/components/hardware/dataV/TopLeftCmp";
import TopMiddleCmp from "@/components/hardware/dataV/TopMiddleCmp";

export default {
  name: 'dataView',
  components: {
    topHeader,
    digitalFlop,
    rankingBoard,
    roseChart,
    waterLevelChart,
    scrollBoard,
    cards,
    bottomRightCmp,
    TopLeftCmp,
    TopMiddleCmp
  },

  data() {
    return {
      colors: ['#4d99fc', '#f46827', '#40faee', '#e69dfa'],
      digitalFlop: [],
      rankdata: {},
      scrollData: {},
      count_OP:[]
    }
  },
  created() {
    const {loadData} = this
    loadData()
    setInterval(loadData,30000)
  },
  methods: {
    async loadData() {
      const id = 1;
      const {data: res} = await this.$http.get('iotweb/farmland/?id=' + id)
      this.digitalFlop = []
      this.rankdata = JSON.parse(JSON.stringify(res.rankdata));
      this.count_OP = res.count_OP
      this.scrollData = JSON.parse(JSON.stringify({
        header: ['时间', '传感器', '数值', '单位'],
        data: res.scrollData,
        index: true,
        columnWidth: [50, 200, 150],
        align: ['center'],
        rowNum: 7,
        headerBGC: '#7eb5f3',
        headerHeight: 45,
        oddRowBGC: 'rgba(63,146,219,0.8)',
        evenRowBGC: 'rgba(28,64,102,0.8)'
      }));
      let that = this
      res.digitalflop.forEach(function (value, index) {
        let temp = {
          title: value.sta_parameter.p_c_name,
          number: {
            // value.sta_parameter.p_dotindex===0?value.sta_value:
            number:[value.sta_value / Math.pow(10, value.sta_parameter.p_dotindex)],
            content: '{nt}',
            textAlign: 'right',
            style: {
              fill: that.colors[index % 4],
              fontWeight: 'bold'
            }
          },
          unit: value.sta_parameter.p_e_unit
        }
        that.digitalFlop.push(temp)
      })

    }
  }
}
</script>

<style lang="less">
#data-view {
  width: 100%;
  height: 100%;
  background-color: #030409;
  color: #fff;

  #dv-full-screen-container {
    background-image: url('./img/bg.png');
    background-size: 100% 100%;
    box-shadow: 0 0 3px blue;
    display: flex;
    flex-direction: column;
  }

  .main-content {
    flex: 1;
    display: flex;
    flex-direction: column;
  }

  .block-left-right-content {
    flex: 1;
    display: flex;
    margin-top: 20px;

  }

  .block-top-bottom-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    padding-left: 20px;
  }

  .block-top-content {
    height: 55%;
    display: flex;
    flex-grow: 0;
    box-sizing: border-box;
    padding-bottom: 20px;
    flex-wrap: wrap;
  }
}
</style>
